<!--
Google IO 2012/2013 HTML5 Slide Template

Authors: Eric Bidelman <ebidel@gmail.com>
         Luke Mahé <lukem@google.com>

URL: https://code.google.com/p/io-2012-slides
-->
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">-->
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <!--This one seems to work all the time, but really small on ipad-->
  <!--<meta name="viewport" content="initial-scale=0.4">-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" media="all" href="theme/css/default.css">
  <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css">
  <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->
  <script data-main="js/slides" src="js/require-1.0.8.min.js"></script>
</head>
<body style="opacity: 0">

<slides class="layout-widescreen">

  <slide class="logoslide nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/blue_logo.png"></span>
    </article>
  </slide>

  <slide class="title-slide segue nobackground">
    <aside class="gdbar"><img src="images/blue_logo.png"></aside>
    <!-- The content of this hgroup is replaced programmatically through the slide_config.json. -->
    <hgroup class="auto-fadein">
      <h1 data-config-title><!-- populated from slide_config.json --></h1>
      <h2 data-config-subtitle><!-- populated from slide_config.json --></h2>
      <p data-config-presenter><!-- populated from slide_config.json --></p>
    </hgroup>
  </slide>

  <slide>
    <hgroup>
      <h2>Jak vznikala koncepce</h2>
    </hgroup>
    <article>
      <ul>
        <li>Výzkum</li>
        <li>Sledování trendů</li>
        <li>Průzkum konkurence</li>
        <li>Data z Google Analytics</li>
      </ul>
    </article>
  </slide>
  
  <slide class="fill nobackground" style="background-image: url(images/colors.jpg)">
    <aside class="note">
      <section>
        <ul>
          <li>Služby (6)</li>
          <li>Náš tým</li>
          <li>Mapy (POI)</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2 class="white">6 barev do webu</h2>
    </hgroup>
  </slide>
  
  <slide class="fill nobackground" style="background-image: url(images/emotion.jpg)">
    <hgroup>
      <h2 class="white">Emoce = zapamatování</h2>
    </hgroup>
  </slide>
  
  <slide>
    <hgroup>
      <h2>C-IN, leader v oboru</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <ul>
        <li>Invence</li>
        <li>Ostatní kopírují</li>
        <li>Všichni si pamatují, kdo byl první</li>
      </ul>
      <img src="images/barchart.png" alt="Description" title="Description">
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Jeviště, publikum</li>
          <li>Efekt přenést do webu</li>
          <li>Odlišení vs konkurence</li>
          <li>Interaktivní prvky</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Jak toho dosáhnout</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/stage.png" alt="Description" title="Description">
      <footer class="source">Maximální uživatelský prožitek</footer>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Mnoho textu vs rozumná míra + multimédia</li>
          <li>Segmentace delsích textů nadpisy a obrázky</li>
          <li>1 obrázek = 1000 slov</li>
          <li>Důkladně napsané texty ponecháme</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Trendy 2013</h2>
    </hgroup>
    <article>
      <ul>
        <li>Flat design</li>
        <li>Prostor, claimy, obrázky</li>
        <li>Interaktivní obsah (grafy, videa, social etc.)</li>
        <li>Výrazné CTA a čisté typo</li>
        <li>Responsive design</li>
      </ul>
    </article>
  </slide>

  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Chrysler experience</li>
          <li>Fakta detailněji než na HP</li>
          <li>Propojení se službami, ref. a testimonialy</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>O nás</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/o-nas"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Personifikace</li>
          <li>Velké fotky</li>
          <li>Slider pro změnu fotek a barvy oblečení</li>
          <li>Primary skills (stars)</li>
          <li>Kontakt</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Náš tým</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/o-nas/nas-tym"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Timeline plugin</li>
          <li>Důraz na dobu na trhu</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Historie</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/o-nas/historie"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>6 barev, 6 služeb</li>
          <li>Kompletní změna stylů
          <ul>
            <li>Logo</li>
            <li>Font</li>
            <li>Navigace</li>
           </ul>
          </li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Služby</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/sluzby"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Čísla (fakta)</li>
          <li>Procesní diagram</li>
          <li>Poptávkový formulář</li>
          <li>Provázání dalších služeb</li>
          <li>Výraznější CTA</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Optimalizace služeb</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/sluzby"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Náhledy s obrázky = emoce</li>
          <li>Fullwidth example - Codrops</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Reference</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/reference"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Osobní přístup</li>
          <li>Řekli o nás - lidštější název</li>
          <li>Video (viz galerie)</li>
          <li>Foto týmu s klientem vs dlouhý text</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Testimonialy</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/reference/testimonialy"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Chybí informace</li>
          <li>Nabídka</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Internetové stránky</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/reference/internetove-stranky"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Vynikající nápad</li>
          <li>Full width</li>
          <li>Barevné stylování POI dle typu služby</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Mapa</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/reference/mapa-destinaci"></iframe>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>Royal Slider</li>
          <li>Full width</li>
          <li>Maximální prožitek</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Galerie</h2>
    </hgroup>
    <article>
      <iframe data-src="http://www.c-in.eu/galerie/fotografie?gallery_id=867"></iframe>
    </article>
  </slide>

  <slide>
    <hgroup>
      <h2>Nezávazná poptávka</h2>
    </hgroup>
    <article>
      <ul>
        <li>Počet účastníků</li>
        <li>Lokace</li>
        <li>Další dle zkušenosti C-IN</li>
      </ul>
    </article>
  </slide>
  
  <slide>
    <aside class="note">
      <section>
        <ul>
          <li>6%</li>
          <li>Tablety, mobily</li>
          <li>Neustálý vzestup</li>
        </ul>
      </section>
    </aside>
    <hgroup>
      <h2>Responsive design</h2>
    </hgroup>
    <article class="flexbox vcenter">
      <img src="images/responsive.jpg" alt="Description" title="Description">
      <footer class="source">Maximální uživatelský prožitek</footer>
    </article>
  </slide>
  
   <slide>
    <hgroup>
      <h2>Reklama</h2>
    </hgroup>
    <article>
      <ul>
        <li>Sponsored stories - Facebook > akvizice fanoušků</li>
        <li>Google Adwords</li>
        <li>Remarketing</li>
      </ul>
    </article>
  </slide>
  
  <slide class="segue dark quote nobackground">
    <aside class="gdbar right bottom"><img src="images/google_developers_icon_128.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <q>
        Vizí společnosti C-IN je zodpovědně plnit a udržovat pozici lídra na domácím trhu a posilovat svoji pozici na mezinárodním trhu. Toho chceme dosáhnout především...implementací nejnovějších trendů v  oboru.
      </q>
      <div class="author">
        C-IN
      </div>
    </article>
  </slide>
  
  <slide class="segue dark quote nobackground">
    <aside class="gdbar right bottom"><img src="images/blue_logo.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <q>
        Společnost C-IN je otevřena novým výzvám a možnostem. Pružně reagujeme na jakoukoli změnu či inovativní nápad a využíváme všechny nově dostupné technologie.
      </q>
      <div class="author">
        C-IN
      </div>
    </article>
  </slide>

  <slide class="thank-you-slide segue nobackground">
    <aside class="gdbar right"><img src="images/blue_logo.png"></aside>
    <article class="flexbox vleft auto-fadein">
      <h2>&lt;Díky za pozornost!&gt;</h2>
      <p>Máte o čem přemýšlet :)</p>
      <p>Q &amp; A</p>
    </article>
    <p class="auto-fadein" data-config-contact>
      <!-- populated from slide_config.json -->
    </p>
  </slide>

  <slide class="logoslide dark nobackground">
    <article class="flexbox vcenter">
      <span><img src="images/google_developers_logo_white.png"></span>
    </article>
  </slide>

  <slide class="backdrop"></slide>

</slides>

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<!--[if IE]>
  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  <script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
</html>
